import React, { useState } from 'react';
import { Button, Checkbox, Form, Input, Card, Space } from 'antd';
import { login } from '../hoc/login.js';
// import { userLogin } from '@/api/login';
import { withRouter } from 'react-router-dom';
import { useDebounce } from '../../utils/debounce';

function Login(props: any) {
  console.log(props);
  const { history } = props;
  const [passwordVisible, setPasswordVisible] = React.useState(false);

  const onFinish = useDebounce((values: any) => {
    console.log('Success:', values);
    sessionStorage.setItem('token', '148745126487512');
    history.push('/home/serve/messall');
  }, 2000);

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="login">
      <Space direction="vertical" size={16}>
        <Card
          title="管理中心登录"
          className="card"
          headStyle={{ textAlign: 'center', fontSize: '25px', color: 'white' }}
          style={{
            width: 400,
          }}
        >
          <Form
            name="basic"
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your password!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="verify_code"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Space direction="horizontal">
                <Input />
                <Button>
                  <img
                    className="img"
                    onClick={() =>
                      setPasswordVisible((prevState) => !prevState)
                    }
                    src="http://fangadmin.shbwyz.com/login/verfiy.html"
                    alt=""
                  />
                </Button>
              </Space>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-btn">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Space>
    </div>
  );
}

export default login(withRouter(Login));
